<template>
  <div>
    <div class="top">
      <div class="img"><img
          :src="img.indexOf('http')>-1?img:('http://localhost:3000'+img)"
          alt=""
          v-if="img"
        />
        <img
          src="../assets/logo.png"
          alt=""
          v-else
        />
      </div>
      <div class="news">
        {{title}}
        <span>{{date}}</span>
      </div>
      <div>
        <van-button
          round
          type="info"
          color="#e1e1e1"
          size="small"
          @click="canle(id)"
        >取消关注</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['img', 'title', 'date', 'id'],
  methods: {
    canle (id) {
      this.$axios({
        url: '/user_unfollow/' + id
      }).then(res => {
        if (res.statusText === 'OK') {
          this.$toast.success('取消关注成功')
          setTimeout(() => {
            this.$emit('canle', true)
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  display: flex;
  align-items: center;
  padding: 20/360 * 100vw;

  .img {
    overflow: hidden;
    border-radius: 50%;
    margin-right: 6/360 * 100vw;
    img {
      width: 40/360 * 100vw;
      height: 40/360 * 100vw;
      object-fit: cover;
    }
  }
  .news {
    flex: 1;
    display: flex;
    flex-direction: column;
    span {
      font-size: 14/360 * 100vw;
      color: rgb(153, 151, 151);
    }
  }
}
</style>
